<template>
    <div>
        <div class="top_box container_box">
            <p class="page-title font-weight-500">校区客服

            </p>
        </div>
        <div class="padding_box">
            <div class="container_box">
                <div class="order_title">
                    校区客服
                </div>
                <el-divider></el-divider>
                <el-upload class="avatar-uploader"
                           action=""
                           :http-request="uploadHttp2"
                           name="files"
                           accept=".png,.jpg,.jpeg"
                           :on-progress="zzUpload">
                    <img v-if="custimerQrcode"
                         :src="custimerQrcode"
                         class="avatar">
                    <i v-else
                       class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import businessCard from '@/components/business-card/business-card.vue';
import { Loading } from 'element-ui';

export default {
    name: 'basetable',
    components: {
        businessCard
    },
    data() {
        return {
            // 上传加载遮罩
            loaddingTip: {
                text: "正在上传,请稍等",
                background: "rgba(0, 0, 0, 0.7)"
            },
            custimerQrcode: '',
            userInfo: JSON.parse(sessionStorage.getItem('userInfo'))
        };
    },
    watch: {
    },
    filters: {
    },
    created() {
        this.custimerQrcode = this.userInfo.customerService
        this.$forceUpdate()
    },
    methods: {
        uploadHttp2({ file }) {
            let _this = this;
            this.$ossClient.ossPut(file).then(res => {
                _this.custimerQrcode = res.requestUrls[0]
                _this.saveAdd()
                console.log("--------------------this.custimerQrcode", this.custimerQrcode)
            })
        },
        // 上传遮罩
        zzUpload(event, file, fileList) {
            Loading.service(this.loaddingTip);
            if (event.percent == 100) {
                setTimeout(function () {
                    Loading.service(this.loaddingTip).close()
                }, 1000);
            }
        },
        // 保存添加
        saveAdd() {
            var _this = this;
            const data = {
                customerService: this.custimerQrcode,
                schoolId: this.userInfo.schoolId,
                schoolName: this.userInfo.schoolName
            }
            axios({
                url: "/admin/school/updateService",
                method: "post",
                data
            }).then(result => {
                if (result.code == 0) {
                    this.$message.success(result.errMsg || '成功');
                    this.userInfo.customerService = this.custimerQrcode
                    sessionStorage.setItem('userInfo', JSON.stringify(this.userInfo))
                } else {
                    this.$message.error(result.errMsg || '失败');
                }
                this.addVisible = false;
            })

        },
    }
};
</script>

<style lang="scss" scoped >
.my-switchStyle {
    margin-right: 25px;
}
.my-switchStyle {
    ::v-deep {
        .el-switch__label {
            position: absolute;
            display: none;
            color: #fff;
        }
        .el-switch__label--left {
            z-index: 9;
            left: 6px;
        }
        .el-switch__label--right {
            z-index: 9;
            left: -16px;
        }
        .el-switch__label.is-active {
            display: block;
        }
        .el-switch__label * {
            font-size: 12px;
        }
        .el-switch__core,
        .el-switch__label {
            width: 52px !important;
        }
    }
}
</style>
<style lang="scss" scoped>
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}
.order-info {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
::v-deep {
    .avatar-uploader {
        width: 200px;
        height: 200px;
        .el-upload {
            width: 200px;
            height: 200px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .el-upload:hover {
            border-color: #409eff;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
        .avatar {
            width: 200px;
            height: 200px;
            display: block;
        }
    }
}
</style>
